<template>
  <div>
    <span style="font-size: 13px">操作者：</span>
    <el-input v-model="query.updator" size="small" placeholder="输入操作者模糊查询" style="width: 150px"></el-input>
    <span style="font-size: 13px"> 操作时间：</span>
    <el-date-picker
        v-model="datetime"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始日期"
        value-format="yyyy-MM-dd HH:mm:ss"
        end-placeholder="结束日期"
        size="small">
    </el-date-picker>
    <span style="font-size: 13px"> 操作类型：</span>
    <el-select v-model="query.type" size="small" style="width: 120px" placeholder="请选择" clearable>
      <el-option value="1" label="用户关系">用户关系</el-option>
      <el-option value="2" label="权限关系">权限关系</el-option>
    </el-select>
    &nbsp
    <el-button type="primary" icon="el-icon-search" size="small" @click="queryFun">搜索</el-button>
    <el-table
        :data="logData"
        style="width: 100%; margin: 10px 0px">
      <el-table-column
          fixed
          sortable
          prop="updateTime"
          label="操作时间"
          width="160">
      </el-table-column>
      <el-table-column
          prop="updator"
          label="操作者姓名"
          width="120">
      </el-table-column>
      <el-table-column
          prop="type"
          :formatter="typeFormat"
          label="操作类型"
          width="120">
      </el-table-column>
      <el-table-column
          prop="targetId"
          label="操作的目标id"
          width="200">
      </el-table-column>
      <el-table-column
          label="旧值"
          width="200">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>{{ scope.row.oldValue }}</p>
            <div slot="reference" class="name-wrapper">
              {{ scope.row.oldValue.substr(0,20) }}
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column
          label="新值"
          width="200">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>{{ scope.row.newValue }}</p>
            <div slot="reference" class="name-wrapper">
              {{ scope.row.newValue.substr(0,20) }}
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column
          prop="status"
          :formatter="stateFormat"
          label="状态"
          width="120">
        <template slot-scope="scope">
          <el-tag
              :type="scope.row.status === '0' ? 'primary' : 'success'"
              disable-transitions>{{scope.row.status == '1' ? '已回退' : '未回退'}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          width="100">
        <template slot-scope="scope">
          <el-button @click="back(scope.row)" type="text" size="small">回退</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.pageNo"
        :page-sizes="[5, 10, 20]"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total">
    </el-pagination>
  </div>

</template>

<script>
import {getLogByCondition,recover} from '@/api/log/index'

export default {
  name: "index",
  data() {
    return {
      datetime:'',
      query:{},
      logData: [],
      page:{
        pageNo:1,
        pageSize:5,
        total:1
      }
    }
  },
  created() {
    this.getPage(this.page);
  },
  methods: {
    stateFormat(row){
      if (row.status == '1') {
        return '已回退'
      } else  {
        return '未回退'
      }
    },
    typeFormat(row) {
      if (row.type == '1') {
        return '用户关系'
      } else  {
        return '权限关系'
      }
    },
    getPage(page){
      getLogByCondition(page,{}).then(res =>{
        this.logData = res.data.records
        this.page.total = res.data.total
      })
    },
    queryFun(){
      if (this.datetime){
        this.query.fromTime = this.datetime[0];
        this.query.toTime = this.datetime[1];
      }
      getLogByCondition(this.page,this.query).then(res =>{
        this.logData = res.data.records
        this.page.total = res.data.total
      })

    },
    back(row) {
      recover(row.id).then(res =>{
        this.getPage(this.page);
      })
    },
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.getPage(this.page);
      // console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.page.pageNo = val;
      this.getPage(this.page);
      // console.log(`当前页: ${val}`);
    }
  },

}
</script>

<style scoped>

</style>
